<template>
  <div style="display: flex;height: 100%;">
    <div style="padding: 20px;">
      <a-menu
        id="dddddd"
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        style="width: 256px;height: 100%;"
        mode="inline"
        :items="items"
        @click="handleClick"
      ></a-menu>
    </div>
    <div style="flex: 1;padding: 20px;display: flex;flex-direction: column;">
      <div style="height: 50px;display: flex;align-items: center;">
        <a-breadcrumb>
          <a-breadcrumb-item href="">
            <home-outlined />
          </a-breadcrumb-item>
          <a-breadcrumb-item>{{ $route.meta.title }}</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div style="flex: 1;height: 0;">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, watch, VueElement, h } from 'vue';
import { HomeOutlined, ProfileOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';
import type { MenuProps, ItemType } from 'ant-design-vue';
import { useRouter } from 'vue-router';

const selectedKeys = ref<string[]>(['rich-text']);
const openKeys = ref<string[]>([]);

const router = useRouter()
function getItem(
  label: VueElement | string,
  key: string,
  icon?: any,
  children?: ItemType[],
  type?: 'group',
): ItemType {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as ItemType;
}

const items: ItemType[] = reactive([
  getItem('富文本', '/rich-text', () => h(ProfileOutlined)),
  getItem('拖拽排序', '/drag-sort', () => h(UnorderedListOutlined)),
  getItem('生成PDF', '/create-pdf', () => h(UnorderedListOutlined)),
]);

const handleClick: MenuProps['onClick'] = e => {
  router.push(e.key + '')
};

watch(openKeys, val => {
  console.log('openKeys', val);
});
</script>

<style>
html, body, #app {
  height: 100%;
  width: 100%;
}
</style>